<template>
  <yd-layout>
  	<!--	header -->
    <mt-header title="完善信息" fixed>
      <router-link to="/hello" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left">真实姓名：</span>
        <yd-input slot="right" type="text" required v-model="form.realName" max="20" placeholder="请输入真实姓名"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">所属部门：</span>
        <yd-input slot="right" type="text" required v-model="form.dept" max="10" placeholder="请输入所属部门"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">手机号码：</span>
        <yd-input slot="right" type="number" required v-model="form.mobile" max="13" placeholder="请输入真实手机号码"></yd-input>
      </yd-cell-item>
    </yd-cell-group>
    <yd-button size="large" type="primary" :disabled="subState" shape="circle" @click.native="submitForm">提交</yd-button>
  </yd-layout>
</template>

<script>
  import userApi from '@/api/userApi.js'
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        form: {
          dept: '',
          realName: '',
          mobile: ''
        },
        subState: true
      }
    },
    computed:{
      ...mapState(['me'])
    },
    methods: {
      submitForm() {
        if(this.form.dept && this.form.dept != '' &&
          this.form.realName && this.form.realName != '' &&
          this.form.mobile && this.form.mobile != '' &&
          this.form.mobile.length == 11
        ) {
          this.$dialog.confirm({
            title: '提交基本信息',
            mes: '确定提交基本信息?',
            opts: () => {
              // 保存逻辑表单逻辑
              userApi.fixInfo(this.form).then(data => {
                if(data === '成功'){
                  this.$router.push({path:'/hello'})
                }else{
                  this.$router.push({path:'/'})
                }
              }).catch(error => {
                this.$dialog.notify({
                  mes: '提交失败请重试!',
                  timeout: 5000,
                  callback: () => {}
                })
              })
            }
          })
        } else {
          this.subState = true
        }
      }
    },
    watch: {
      'form': {
        handler: function(curVal, oldVal) {
          if(curVal.dept && curVal.dept != '' &&
            curVal.realName && curVal.realName != '' &&
            curVal.mobile && curVal.mobile != '' &&
            curVal.mobile.length == 11
          ) {
            this.subState = false
          } else {
            this.subState = true
          }
        },
        deep: true
      }
    }
  }
</script>

<style>

</style>